import { useGlobal } from '../status'
import styles from '../../styles/ui.module.css'
import { Show } from 'solid-js'
import { FC } from '../../../type'
import { ListItem, ListItemType } from '../type'
import { getDomById } from '../../../utils/list'

const iconMap: Record<ListItemType, string> = {
  text: '📄',
  doc: '📑',
  video: '📁',
  test: '📝',
  default: '📦',
}

const Item: FC<{ data: ListItem }> = ({ data }) => {
  const {updateSnapshot} = useGlobal()
  const handleClick = () => {
    getDomById(data.id).trigger('click')
    updateSnapshot()
  }
  return <div
    class={styles.panelListItem}
    style={{
      opacity: data.done ? '.5' : '',
      color: data.current ? '#0aff0a' : '',
    }}
    onClick={handleClick}
  >
    <div>{iconMap[data.type] || iconMap.default}</div>
    <div>&nbsp;</div>
    <div title={data.name} class={styles.panelListItemName}>{data.name}</div>
  </div>
}

export const Content = () => {

  const { status, minimal } = useGlobal()

  return <Show when={!minimal()}>
    <div class={styles.panelContent}>
      <div class={styles.panelList}>
        {status().list?.map(item => <Item data={item}/>)}
      </div>
    </div>
  </Show>
}
